<template>
  <div class="personalSOPDetails">
    <div class="personalSOPDetails_box">
      <template v-if="dataList.length">
        <div v-for="(item, index) in dataList" :key="index" class="" style="margin-bottom: 20px; overflow: hidden;">
          <div class="personalSOPDetails_item">
            <div class="personalSOPDetails_message">
              <div class="personalSOPDetails_message_top">
                <div class="personalSOPDetails_message_top_left">
                  <div class="personalSOPDetails_message_top_left_userImg">
                    <img :src="item.avatar" alt="" />
                  </div>
                  <div class="personalSOPDetails_message_top_left_info">
                    <div>
                      {{ item.customerName
                      }}<span :style="{ color: item.customerType === 1 ? '#4bde03' : '#f9a90b' }">
                        {{ { 1: '@微信', 2: item.corpName ? '@' + item.corpName : '@企业微信' }[item.customerType] }}
                      </span>
                    </div>
                    <div>
                      <img v-if="item.gender === 1" src="../../../assets/man.png" />
                      <img v-else-if="item.gender === 2" src="../../../assets/woman.png" />
                    </div>
                  </div>
                </div>
                <div class="personalSOPDetails_message_top_right" @click="getContact(item.externalUserid)">
                  进入会话
                </div>
              </div>
              <div class="personalSOPDetails_message_content">
                <div class="personalSOPDetails_message_content_box">
                  <div class="personalSOPDetails_message_content_box_title">
                    今日<span v-if="item.allNum != 0">{{ item.allNum }}条</span
                    ><span v-if="item.allNum == 0">暂无</span>SOP内容待推送
                  </div>
                  <div style="padding: 0 5px;">
                    <template v-for="(item1, index1) in item.list">
                      <div
                        v-if="item1.list1.length != 0 && item1.list1"
                        :key="index1"
                        class="personalSOPDetails_message_content_box_li"
                        :class="[
                          item1.type == 1 ? 'personalSOPDetails_message_content_box_li1' : '',
                          item1.type == 2 ? 'personalSOPDetails_message_content_box_li2' : '',
                          item1.type == 3 ? 'personalSOPDetails_message_content_box_li3' : ''
                        ]"
                      >
                        <div @click="openL(item1)" class="personalSOPDetails_message_content_box_li_title">
                          <div class="personalSOPDetails_message_content_box_li_left">
                            <div class="personalSOPDetails_message_content_box_li_left_l"></div>
                            <div v-if="item1.type == 1" class="personalSOPDetails_message_content_box_li_left_title">
                              {{ item1.list1.length }}条SOP已到推送时间
                            </div>
                            <div v-if="item1.type == 2" class="personalSOPDetails_message_content_box_li_left_title">
                              {{ item1.list1.length }}条SOP已过推送时间
                            </div>
                            <div v-if="item1.type == 3" class="personalSOPDetails_message_content_box_li_left_title">
                              {{ item1.list1.length }}条SOP未到推送时间
                            </div>
                          </div>
                          <div v-if="item1.type == 1" class="personalSOPDetails_message_content_box_li_right">
                            <img v-if="!item1.open" src="@/assets/Applications/topj1.png" alt="" />
                            <img
                              style="transform: rotate(180deg);"
                              v-if="item1.open"
                              src="@/assets/Applications/topj1.png"
                              alt=""
                            />
                          </div>
                          <div v-if="item1.type == 2" class="personalSOPDetails_message_content_box_li_right">
                            <img v-if="!item1.open" src="@/assets/Applications/topj2.png" alt="" />
                            <img
                              style="transform: rotate(180deg);"
                              v-if="item1.open"
                              src="@/assets/Applications/topj2.png"
                              alt=""
                            />
                          </div>
                          <div v-if="item1.type == 3" class="personalSOPDetails_message_content_box_li_right">
                            <img v-if="!item1.open" src="@/assets/Applications/topj3.png" alt="" />
                            <img
                              style="transform: rotate(180deg);"
                              v-if="item1.open"
                              src="@/assets/Applications/topj3.png"
                              alt=""
                            />
                          </div>
                        </div>
                        <template v-for="(item2, index2) in item1.list1">
                          <div :key="index2" v-if="item1.open" class="personalSOPDetails_message_content_box_li_li">
                            <div class="personalSOPDetails_message_content_box_li_li_title">
                              <div class="personalSOPDetails_message_content_box_li_li_title_left">
                                SOP名称：
                              </div>
                              <div class="personalSOPDetails_message_content_box_li_li_title_right">
                                {{ item2.sopName }}
                              </div>
                            </div>
                            <div class="personalSOPDetails_message_content_box_li_li_time">
                              <div class="personalSOPDetails_message_content_box_li_li_time_left">
                                推送时间：
                              </div>
                              <div class="personalSOPDetails_message_content_box_li_li_time_right">
                                <div
                                  v-if="item1.type == 1"
                                  style="display: flex; flex-direction: column; align-items: center; padding: 4px 0;"
                                >
                                  <div
                                    style="width: 8px; height: 8px; border-radius: 50%; background-color: #1abc9c;"
                                  ></div>
                                  <div style="width: 2px; flex: 1; background-color: #1abc9c;"></div>
                                  <div
                                    style="width: 8px; height: 8px; border-radius: 50%; background-color: #1abc9c;"
                                  ></div>
                                </div>
                                <div
                                  v-if="item1.type == 2"
                                  style="display: flex; flex-direction: column; align-items: center; padding: 4px 0;"
                                >
                                  <div
                                    style="width: 8px; height: 8px; border-radius: 50%; background-color: #ed4014;"
                                  ></div>
                                  <div style="width: 2px; flex: 1; background-color: #ed4014;"></div>
                                  <div
                                    style="width: 8px; height: 8px; border-radius: 50%; background-color: #ed4014;"
                                  ></div>
                                </div>
                                <div
                                  v-if="item1.type == 3"
                                  style="display: flex; flex-direction: column; align-items: center; padding: 4px 0;"
                                >
                                  <div
                                    style="width: 8px; height: 8px; border-radius: 50%; background-color: #7f7f7f;"
                                  ></div>
                                  <div style="width: 2px; flex: 1; background-color: #7f7f7f;"></div>
                                  <div
                                    style="width: 8px; height: 8px; border-radius: 50%; background-color: #7f7f7f;"
                                  ></div>
                                </div>
                                <div class="personalSOPDetails_message_content_box_li_li_time_right_time">
                                  <div class="personalSOPDetails_message_content_box_li_li_time_right_time1">
                                    {{ item2.pushStartTime }}
                                  </div>
                                  <div class="personalSOPDetails_message_content_box_li_li_time_right_time2">
                                    {{ item2.pushEndTime }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </template>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template><NoData v-if="!dataList.length"></NoData> </template>
    </div>
    <Loading :isLoad="load" />
  </div>
</template>

<script>
  import { customerSopList } from '@/api/sop.js'
  import { compareTime } from '@/utils/index.js'
  import NoData from '@/components/NoData.vue'
  import Loading from '@/components/Loading.vue'
  export default {
    name: 'customer-sop',
    components: {
      NoData,
      Loading
    },
    data() {
      return {
        load: false,
        dataList: []
      }
    },
    methods: {
      openL(item1) {
        item1.open = !item1.open
        this.$forceUpdate()
      },
      getInitData() {
        this.load = true
        customerSopList().then((res) => {
          if (res.code === 200) {
            this.dataList = res.data
            this.dataList.forEach((dd) => {
              dd.allNum = dd.weSopToBeSentContentInfoVo.length
              dd.list = [
                {
                  type: 1,
                  open: false,
                  list1: []
                },
                {
                  type: 2,
                  open: false,
                  list1: []
                },
                {
                  type: 3,
                  open: false,
                  list1: []
                }
              ]
              dd.weSopToBeSentContentInfoVo.forEach((unit, key) => {
                let str = compareTime(unit.pushStartTime, unit.pushEndTime)
                if (str === 'before') {
                  dd.list[2].list1.push(unit)
                } else if (str === 'after') {
                  dd.list[1].list1.push(unit)
                } else {
                  dd.list[0].list1.push(unit)
                }
              })
            })
            this.$forceUpdate()
          }
          this.load = false
        })
      },
      getContact(id) {
        wx.openEnterpriseChat({
          // 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
          userIds: '', //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
          externalUserIds: id, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
          groupName: '', // 会话名称。单聊时该参数传入空字符串""即可。
          chatId: '', // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
          success: (res) => {
            // 回调
          },
          fail: (res) => {
            if (res.errMsg.indexOf('function not exist') > -1) {
              alert('版本过低请升级')
            } else {
              // 企微会自动弹出错误提示
              // this.$dialog({ message: '进入失败：' + JSON.stringify(res) })
            }
          }
        })
      }
    },
    created() {
      this.getInitData()
    }
  }
</script>

<style lang="less" scoped>
  .personalSOPDetails {
    width: 100%;
    height: 100vh;
    background: #fafafa;
    position: relative;
    .personalSOPDetails_box {
      padding: 10px;
    }
    .personalSOPDetails_item {
      display: flex;
      margin-bottom: 10px;
    }

    .personalSOPDetails_message {
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      font-weight: 500;
      background: #fff;
      min-height: 25px;
      padding: 9px 10px;
      color: #222121;
      width: 100%;
      .personalSOPDetails_message_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .personalSOPDetails_message_top_left {
          display: flex;
          .personalSOPDetails_message_top_left_userImg {
            width: 50px;
            height: 50px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .personalSOPDetails_message_top_left_info {
            padding-top: 2px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 10px;
            img {
              width: 16px;
              height: 16px;
            }
          }
        }
        .personalSOPDetails_message_top_right {
          padding: 6px 15px;
          background-color: #2c8cf0;
          color: #fff;
          border-radius: 5px;
        }
      }
      .personalSOPDetails_message_content {
        .personalSOPDetails_message_content_box {
          width: 100%;
          margin-top: 15px;
          background-color: #ecf5ff;
          padding: 10px;
          .personalSOPDetails_message_content_box_title {
            color: #1364f4;
          }
          .personalSOPDetails_message_content_box_li {
            margin-top: 10px;
            padding: 10px;
            .personalSOPDetails_message_content_box_li_title {
              display: flex;
              justify-content: space-between;
            }
            .personalSOPDetails_message_content_box_li_left {
              display: flex;
              align-items: center;
            }
            .personalSOPDetails_message_content_box_li_li {
              margin-top: 10px;
              background-color: #fff;
              padding: 10px;
              border-radius: 1px;
              .personalSOPDetails_message_content_box_li_li_title {
                display: flex;
                align-items: center;
                color: #222121;
                .personalSOPDetails_message_content_box_li_li_title_left {
                  color: #adadad;
                }
              }
              .personalSOPDetails_message_content_box_li_li_time {
                margin-top: 10px;
                display: flex;
                color: #222121;
                .personalSOPDetails_message_content_box_li_li_time_left {
                  color: #adadad;
                }
                .personalSOPDetails_message_content_box_li_li_time_right {
                  display: flex;
                  .personalSOPDetails_message_content_box_li_li_time_right_time {
                    margin-left: 5px;
                    .personalSOPDetails_message_content_box_li_li_time_right_time2 {
                      margin-top: 10px;
                    }
                  }
                }
              }
            }
          }
          .personalSOPDetails_message_content_box_li1 {
            background-color: #f3fff4;
            .personalSOPDetails_message_content_box_li_left_l {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background-color: #00bf2f;
            }
            .personalSOPDetails_message_content_box_li_left_title {
              color: #00bf2f;
              margin-left: 10px;
            }
            .personalSOPDetails_message_content_box_li_right {
              width: 16px;
              height: 16px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .personalSOPDetails_message_content_box_li2 {
            background-color: #ffddd5;
            .personalSOPDetails_message_content_box_li_left_l {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background-color: #ed4014;
            }
            .personalSOPDetails_message_content_box_li_left_title {
              color: #ed4014;
              margin-left: 10px;
            }
            .personalSOPDetails_message_content_box_li_right {
              width: 16px;
              height: 16px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .personalSOPDetails_message_content_box_li3 {
            background-color: #f0f0f0;
            .personalSOPDetails_message_content_box_li_left_l {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background-color: #7f7f7f;
            }
            .personalSOPDetails_message_content_box_li_left_title {
              color: #7f7f7f;
              margin-left: 10px;
            }
            .personalSOPDetails_message_content_box_li_right {
              width: 16px;
              height: 16px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
    .backTo {
      position: fixed;
      width: 100%;
      padding: 15px 20px;
      background-color: #fff;
      box-shadow: 0px 3px 2px #cecece;
    }
  }
</style>
